import React, { PureComponent } from 'react';
import { isduplicate } from '@/services/unit';
import { Form, Input, Select, Row, Col } from 'antd';

const { Option } = Select;

export default class Index extends PureComponent {

  checkUserNameUnique(rule, value, callback) {
    isduplicate({ unit_name: value }).then(function (response) {
      if (response && response.status == 200) {
        const { result } = response;
        if ( result == 0) {
          callback();
        } else {
          callback('单位名称已存在');
        }
      } else {
        callback('校验单位名称失败!');
      }
    });
  }

  render() {
    const { form, constants = {}, data = {}, disabled = false } = this.props;
    const { unitTyps = [] } = constants;
    const { getFieldDecorator } = form;

    return (
      <Form layout='vertical'>
        <Form.Item label='单位名称'>
          {getFieldDecorator('unit_name', {
            initialValue: data.unit_name || undefined,
            validateFirst: true,
            validateTrigger: 'onBlur',
            rules: [
              { required: true, message: '该项为必填项' },
              {
                validator: (rule, value, callback) =>
                  this.checkUserNameUnique(rule, value, callback),
              },
            ]
          })(
            <Input placeholder='请输入单位名称' size='large' disabled={disabled} />
          )}
        </Form.Item>
        <Form.Item label='值班地址'>
          {getFieldDecorator('unit_address', {
            initialValue: data.unit_address || undefined,
            rules: [{ required: true, message: '该项为必填项' }],
          })(
            <Input placeholder='请输入单位地址' size='large' disabled={disabled} />
          )}
        </Form.Item>
        <Form.Item label='单位类型'>
          {getFieldDecorator('unit_type', {
            initialValue: data.unit_type || undefined,
            rules: [{ required: true, message: '该项为必填项' }],
          })(
            <Select placeholder='请选择单位类型' size='large' disabled={disabled}>
              {unitTyps && unitTyps.map(item => {
                return <Option key={item.dicKey} value={item.dicKey}>{item.dicName}</Option>
              })}
            </Select>
          )}
        </Form.Item>
        <Row gutter={16} type='flex'>
          <Col span={12}>
            <Form.Item label='邮政编码'>
              {getFieldDecorator('unit_dawk', {
                initialValue: data.unit_dawk || undefined
              })(
                <Input placeholder='请输入邮政编码' size='large' disabled={disabled} />
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <div>
              <div style={{ color: 'rgba(0, 0, 0, 0.65)', lineHeight: '1.5', paddingBottom: 8 }}>值班电话</div>
              <div>
                {getFieldDecorator('unit_code', {
                  initialValue: data.unit_code || undefined
                })(
                  <Input placeholder='区号' size='large' style={{ width: 90 }} disabled={disabled} />
                )}
                <span style={{ margin: '0 5px' }}>-</span>
                {getFieldDecorator('unit_phone', {
                  initialValue: data.unit_phone || undefined
                })(
                  <Input placeholder='电话号码' size='large' style={{ width: 160 }} disabled={disabled} />
                )}
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }
}